<template>
  <div class="container">
    <image class="full-screen"
           v-if="hasLaunch"
           src="bmlocal://assets/splash/img_splash.png"></image>

    <div class="full-screen"
         v-else>
      <slider class="full-screen"
              :auto-play="false"
              :show-indicators="false"
              :infinite="false"
              @change="sliderChange">

        <div class="guide"
             v-for="(img, index) in imageList"
             :key="index">

          <image class="full-screen"
                 :src="img"></image>

          <text class="guide-btn"
                v-if="slideIndex >= (imageLength - 1)"
                @click="checkLogin">立即体验</text>

        </div>

      </slider>

      <text class="jump-btn"
            @click="checkLogin">跳过</text>

      <div class="indicators">
        <div class="indicator-dot"
             v-for="i in imageLength"
             :key="i"
             :class="[slideIndex === i - 1 ? 'indicator-dot-active':'']"></div>
      </div>
    </div>

  </div>
</template>

<script>
import { STORAGE_TOKEN, STORAGE_FIRST_LAUNCH } from '../../plugins/constant'

export default {
  components: {},

  props: {},

  data() {
    return {
      hasLaunch: true,
      slideIndex: 0,
      imageList: [
        'bmlocal://assets/splash/img_guide_item_01.png',
        'bmlocal://assets/splash/img_guide_item_02.png',
        'bmlocal://assets/splash/img_guide_item_03.png'
      ]
    }
  },

  computed: {
    imageLength() {
      return this.imageList.length
    }
  },

  created() {
    this.checkFirstLaunch()
  },

  methods: {
    // androidFinishApp() {
    //   const globalEvent = weex.requireModule('globalEvent')
    //   globalEvent.addEventListener('homeBack', options => this.$router.finish())
    // },

    checkFirstLaunch() {
      this.hasLaunch = this.$storage.getSync(STORAGE_FIRST_LAUNCH)
      if (this.hasLaunch) {
        this.checkLogin()
      } else {
        this.$storage.setSync(STORAGE_FIRST_LAUNCH, '1')
      }
    },

    checkLogin() {
      const token = this.$storage.getSync(STORAGE_TOKEN)
      const page = token ? 'tabBar' : '/pages/user/login.js'
      this.goPage(page)
    },

    goPage(page) {
      this.$router.setHomePage(page)
      // this.$nav.open({
      //   name: page,
      //   canBack: false,
      //   statusBarStyle: 'LightContent'
      // })
    },

    sliderChange(data) {
      this.slideIndex = data.index
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.full-screen {
  width: 750px;
  flex: 1;
}
.guide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.indicators {
  position: fixed;
  bottom: 20px;
  align-items: center;
  flex-direction: row;
  width: 750px;
  justify-content: center;
}
.indicator-dot {
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #aaa;
  border-width: 5px;
  border-style: solid;
  border-color: #fff;
}
.indicator-dot-active {
  border-color: #000;
  background-color: #fff;
}
.jump-btn {
  position: fixed;
  top: 60px;
  right: 50px;
  padding: 10px;
  font-size: 28px;
  color: #333;
}
.guide-btn {
  position: fixed;
  bottom: 80px;
  width: 500px;
  justify-content: center;
  background-color: #148483;
  color: #fff;
  height: 100px;
  line-height: 80px;
  font-size: 36px;
  text-align: center;
  margin-left: 125px;
  border-radius: 50px;
  border-width: 10px;
  border-style: solid;
  border-color: #fff;
}
</style>
